<template>
    <div id="pageAside">
        <el-aside width="200px">
           <el-menu 
           class="el-menu-vertical-demo" 
           background-color="#1e5ee2" 
           text-color="#fff" 
           :default-active="currentPage" 
           :collapse="isCollapse"
           v-show="!isCreateTemplate"
           unique-opened
           router>
            <v-app-menu :menus="menus2"/>
           </el-menu>

           <el-menu
            class="el-menu-vertical-demo" 
            background-color="#1e5ee2" 
            text-color="#fff"
            default-active="checkList"
            v-show="isCreateTemplate"
            >
            <div>
              <template>
                <el-submenu class="is-active" >
                  <template slot="title">
                    <i class="nav_icon icon-brief"></i>
                    <span slot="title" class="left-menu--text">图表维度</span>
                    <i class="navLevel1_top"></i>
                    <i class="navLevel1_bottom"></i>
                  </template>
                  <el-menu-item index="checkList">
                    <el-checkbox-group v-model="checkList" @change="checkListFuc">
                      <el-checkbox label="文本"></el-checkbox>
                      <el-checkbox label="简报概述"></el-checkbox>
                      <el-checkbox label="监测概述"></el-checkbox>
                      <el-checkbox label="事件走势图"></el-checkbox>
                      <el-checkbox label="网站统计图"></el-checkbox>
                      <el-checkbox label="来源分析图"></el-checkbox>
                      <el-checkbox label="情感分析图"></el-checkbox>
                      <el-checkbox label="境内外分布"></el-checkbox>
                      <el-checkbox label="地域分布图"></el-checkbox>
                      <el-checkbox label="主要舆情"></el-checkbox>
                      <el-checkbox label="处置建议"></el-checkbox>
                    </el-checkbox-group>
                  </el-menu-item>
                </el-submenu>
              </template>
            </div>
           </el-menu>


          <el-menu
            class="el-menu-vertical-demo" 
            background-color="#1e5ee2" 
            text-color="#fff"
            v-show="isTemplateList"
            :default-active="templateActive">
            <div>
              <template>
                <el-submenu class="is-active">
                  <template slot="title">
                    <i class="nav_icon icon-brief"></i>
                    <span slot="title" class="left-menu--text">模板列表</span>
                    <i class="navLevel1_top"></i>
                    <i class="navLevel1_bottom"></i>
                  </template>
                  <el-menu-item :index="item.id" v-for="item in templateList" :key="item.id">
                    <i class="nav_icon"></i>
                    <span slot="title" class="left-menu--text">{{item.title}}</span>
                    <i class="navLevel1_top"></i>
                    <i class="navLevel1_bottom"></i>
                  </el-menu-item>
                </el-submenu>
              </template>
            </div>
           </el-menu>

        </el-aside>
    </div>
</template>
<script>
import '../assets/css/aside2.css'
import VAppMenu from './appMenu.vue'
export default {
    data(){
      return{
        isCollapse: false,
        currentPage: '/home',
        dialogVisible: false,
        dialogVisibleTip: '',
        deleteItem: null,
        isCreateTemplate: false,
        checkList:['文本','简报概述','监测概述', '事件走势图','网站统计图','来源分析图','情感分析图','境内外分布','地域分布图','主要舆情','处置建议'],
        isTemplateList: false,
        templateActive: '214324',
        templateList:[
          {
            title: '测试1',
            id: '214324'
          },
          {
            title: '测试2',
            id: '1212313'
          }
        ]
      }
    },
    computed:{
      menus2 () {
        return this.$store.state.menus || []
      }
      
    },
    methods:{
      checkListFuc(val){
        this.$bus.$emit('createTemplate', val);
      }
    },

    created(){
      if (this.$route.path) {
        if(this.$route.name == 'createTemplate'){
          this.isCreateTemplate = true
          this.$bus.$emit('createTemplate', this.checkList);
        }else{
          this.isCreateTemplate = false
        }
        this.currentPage = this.$route.path; // 实现路由切换
      }


      this.$bus.$on('createTemplateChange', msg =>{
        this.checkList = msg
      })

    },
    watch: {
      $route() {
        if (this.$route.path) {
          if(this.$route.name == 'createTemplate'){
            this.isCreateTemplate = true
            this.$bus.$emit('createTemplate', this.checkList);
          }else{
            this.isCreateTemplate = false
          }
          this.currentPage = this.$route.path; // 实现路由切换
        }
      }
    },
    components: {
      VAppMenu
    },
}
</script>
<style>

</style>